<template>
      <transition name="dialog-fade">
        <div class="jc-dialog__wrapper" v-show="visible" @click.self="handleClose">
            <div class="jc-dialog" :style="{width, marginTop:top}">
                <div class="jc-dialog__header">
                    <slot name="title">
                        <span class="jc-dialog__title">{{ title }}</span>
                    </slot>
                    <button class="jc-dialog__headerbtn" @click="handleClose">
                        <i class="jc-icon-close"></i>
                    </button>
                </div>
                <div class="jc-dialog__body">
                    <slot></slot>
                </div>
                <div class="jc-dialog__footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
  </transition>
</template>

<script>
export default {
  name: 'a-dialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '50%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="sass" scoped>
@import "./a-dialog.scss"
</style>
